import React from 'react'
import { BaseListPage, IBaseListPageState, IBaseListPageProps, columnRenders, UdDateRangePicker, UdDatePicker, routeUtils, http } from '@/lib';
import { Badge, Select, Button, Modal, message, Spin } from 'antd';
import apis from '@/apis/AboutQuota';
import dayjs from 'dayjs';
import udMainStore from '@/store/UdMain';
import '../Detail/detail.css'
const { Option } = Select
//接口字段映射
const fieldMap = {
  status: 'approvalStatus'
}
const ModifyTooAli = "quota_employee_manager_pushQuotaApplyIssuedModifyTooAli" //重新推送
const DetailPage = "quota_employee_manager_getEffectIssuedQuotaDetailPage" //详情

export default class ApplicationFormList extends BaseListPage<ApplicationFormListProps, ApplicationFormListState>{
  // 隐藏掉头曲二曲
  public hideArr: any = ['头曲', '二曲', '泸州老窖头曲酒类销售有限公司', '泸州老窖二曲酒类销售有限公司']
  public brandCompanies = udMainStore.brandList.filter(item => this.hideArr.indexOf(item.title) === -1)
  constructor(props) {
    super(props)
    this.state = {
      visible: false,
      title: "配额下达申请单",
      rowKey: 'id',
      queryApi: apis.TransmitRequisition,
      method: 'POST',
      conditions: [
        { id: 'businessKey', label: '配额编号' },
        {
          id: 'brandCode', label: '销售组织', render: () => (
            <Select placeholder="请选择销售组织">
              {this.brandCompanies.map(({ value, title }) => (<Option key={value} value={value}>{title}</Option>))}
            </Select>
          )
        },
        {
          id: 'approvalStatus', label: '审批状态', render: () => (
            <Select>
              <Option value="AUDITING">审核中</Option>
              <Option value="AUDITSUCC">审核通过</Option>
              <Option value="AUDITFAIL">审核失败</Option>
            </Select>
          )
        },
        {
          id: 'sendSucc', label: '推送阿里订单', render: () => (
            <Select>
              <Option value="Y">推送成功</Option>
              <Option value="N">推送失败</Option>
              <Option value="NY">正在推送</Option>
              <Option value="WT">等待推送</Option>
            </Select>
          )
        },
        { id: 'createTime', label: '操作时间', render: () => <UdDatePicker format='YYYY-MM-DD' /> },
        { id: 'createName', label: '发起人' },
      ],
      columns: [
        ['序号', 'id', (text, recode, index) => index + 1],
        ['配额编号', 'businessKey'],
        ['标题', 'description', null, { minWidth: '120px' }],
        ['销售组织', 'brandName'],
        { title: '审批状态', key: 'approvalStatus', dataIndex: 'approvalStatus', render: (text, record, index) => this.renderStatus(record) },
        {
          title: '是否推送阿里订单', key: 'sendSucc', dataIndex: 'sendSucc', render: (text) => {
            let color
            let statusText
            if (text == 'Y') {
              color = '#00A854'
              statusText = '推送成功'
            } else if (text == 'N') {
              color = 'volcano'
              statusText = '推送失败'
            } else if (text == 'NY') {
              color = 'cyan'
              statusText = '正在推送'
            } else if (text == 'WT') {
              color = 'cyan'
              statusText = '等待推送'
            }
            return <Badge color={color} text={statusText} />
          }
        },
        ['发起人', 'createName'],
        ['操作时间', 'createTime', (text) => <span>{text && dayjs(text).format('YYYY-MM-DD HH:mm:ss')}</span>],
        {
          title: '操作',
          dataIndex: 'operate',
          fixedWidth: '120px',
          fixed: 'right',
          render: columnRenders.operate([
            {
              title: '查看详情', action: (text, record) => this.handeltoDetail(record),
              auth: DetailPage
            },
            {
              show: (text: any, model: any, index: number) => model.sendSucc == 'N',
              auth: ModifyTooAli,
              title: '重新推送', action: (text, record) => { this.handelreset(record) }
            }
          ])
        }
      ],
      leftBtns: [
        <Button type="primary" onClick={this.handeltonextpage}>配额下达</Button>,
      ],
      tableProps: {
        rowSelection: null
      },
      spinning: false,
    }

  }

  render() {
    return (
      <Spin spinning={this.state.spinning} tip='推送中，请稍后...'>
        {super.render()}
      </Spin>
    )
  }

  /* 重新推送 */
  private handelreset = (record) => {
    this.setState({ spinning: true })
    const { brandCode, businessKey, description } = record
    const params = { brandCode, businessKey, description, status: 'add' }
    http.post(apis.RePushQuotaApply, params).then(res => {
      message.success('推送成功')
      this.query()
    }).finally(() => {
      this.setState({ spinning: false })
    })
  }
  private handeltonextpage = () => {
    this.props.history.push('/quota/monthlyquota')
  }
  private handeltoDetail = (record) => {
    console.log(record);
    this.props.history.push(`/quota/applicationform/Detail/${record.businessKey}/${record.brandCode}/${record.brandName}/${record.approvalStatus}`)
  }
  //表格状态渲染
  private renderStatus = (record) => <><span style={{
    display: "inline-block",
    width: "6px",
    height: "6px",
    borderRadius: "6px",
    marginRight: "5px",
    marginBottom: "1px",
    backgroundColor: record[fieldMap.status] === 'AUDITING' ? "#DAA520" : record[fieldMap.status] === 'AUDITSUCC' ? "#00A854" : record[fieldMap.status] === 'AUDITFAIL' ? "#D9001B" : ""
  }}></span><span>{
    record[fieldMap.status] === 'AUDITING' ? "审核中" : record[fieldMap.status] === 'AUDITSUCC' ? "审核通过" : record[fieldMap.status] === 'AUDITFAIL' ? "审核失败" : ""
  }</span></>
}

interface ApplicationFormListState extends IBaseListPageState {
  visible: boolean
  spinning: boolean
}

interface ApplicationFormListProps extends IBaseListPageProps {

}